<template>
  <div class="oauth w-flex-center">
    <p class="title">
      第三方登录
    </p>
    <p class="describe">
      目前只有在聊天室/意见反馈使用
    </p>
    <user-info v-if="OAuth.name" />
    <ul v-else class="oauth-list">
      <li>
        <svgicon class="icon w-pointer" name="qq" @click="qqClick" />
      </li>
      <li>
        <svgicon class="icon w-pointer" name="github" @click="githubClick" />
      </li>
    </ul>
    <w-home />
    <a-icon v-if="webBackUrl" type="arrow-left" class="web-back-icon w-pointer" @click="webBackClick"/>
  </div>
</template>

<script lang="ts">
import { mapState } from 'vuex'
import '@/icons/qq'
import '@/icons/github'
import { Vue, Component } from 'vue-property-decorator'
import UserInfo from '@/components/OAuth/userInfo'
import WHome from '@/components/global/home'

@Component({
  name: 'OAuth',
  layout: 'OAuth',
  components: {
    UserInfo,
    WHome
  },
  computed: {
    ...mapState({
      OAuth: 'oauth'
    })
  }
})
export default class OAuth extends Vue {

  get webBackUrl (): string {
    const { webBack = '' } = this.$route.query as any
    return webBack
  }

  /**
   * 缓存界面返回路径
   */
  cacheWebBack () {
    const { webBack = '' } = this.$route.query as any
    sessionStorage.setItem((process.env.OAUTH_WEB_BACK_URL_KEY as string), webBack)
  }

  /**
   * QQ 点击
   */
  qqClick () {
    this.cacheWebBack()
    const p = `response_type=token&client_id=${process.env.OAUTH_QQ_APP_ID}&redirect_uri=${process.env.OAUTH_QQ_REDIRECT_URL}&scope=get_user_info`
    location.href = `${process.env.QQ_OAUTH_URL}?${p}`
  }

  /**
   * github
   */
  githubClick () {
    this.$message.info('稍等两天，还没弄好')
  }

  webBackClick () {
    this.$router.replace(this.webBackUrl)
  }
}
</script>

<style scoped lang="less">
.oauth {
  height: 100vh;
  flex-direction: column;
  .title {
    font-size: 40px;
    color: #ddd;
  }
  .describe {
    font-size: 14px;
    color: #aaa;
  }
  .oauth-list {
    display: flex;
    justify-content: center;
    margin-top: 50px;
    .icon {
      width: 60px;
      height: 60px;
      fill: rgba(231, 105, 151, 0.5);
      margin: 10px;
      padding: 5px;
      border: 3px solid rgba(231, 105, 151, 0.5);
      border-radius: 50%;
    }
    .icon:hover {
      fill: #e87292;
      border: 3px solid rgba(231, 105, 151, 1);
    }
  }
  .web-back-icon {
    position: fixed;
    left: 80px;
    top: 20px;
    font-size: 40px;
    color: #999;
  }
  .web-back-icon:hover {
    color: #fff;
  }
}
</style>
